<template>
  <a-modal
    :title="title"
    :maskClosable="false"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div>
      <a-row>
        <a-col>
          <div class="mb10">已选机台：{{ chose.length }}台</div>
        </a-col>
      </a-row>
      <div class="box mb10">
        <div class="content">
          <template>
            <a-checkbox-group v-model:value="chose" style="width: 100%" @change="toggleChose">
              <div style="display: flex;flex-wrap: wrap;">
                <div class="equipment-scope" v-for="(row, index) in ingotslds" :key="index">
                  <a-checkbox :value="row">
                    {{ row }}
                  </a-checkbox>
                </div>
              </div>
            </a-checkbox-group>
          </template>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import { getDevice } from '@/api/customApi'
import JEditor from '@/components/jeecg/JEditor'
import JSwitch from '@/components/jeecg/JSwitch'
import { editDeviceSpooling } from '../../../../api/customApi'

export default {
  props: ['time'],
  name: 'DingshuModal',
  components: {
    JEditor,
    JSwitch,
  },
  data() {
    return {
      title: '选择机台',
      isEquipment: false,
      visible: false,
      row: {},
      ingotslds:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24',
        '25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64'],
      model: {},
      confirmLoading: false,
      selectDeviceIds: [],
      device: [],
      chose: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24',
        '25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64'],
      tags: [],
      equipList: [],
      url: {
        add: '/crm_daily_plan_spooling/crmDailyPlanSpooling/add',
        edit: '/crm_daily_plan_spooling/crmDailyPlanSpooling/edit'
      }
    }
  },
  created() {
  },
  methods: {
    show(records, param, isAddTable, changeEdit = false) {
      this.changeEdit = changeEdit
      this.visible = true
      this.addTable = isAddTable
      this.row = Object.assign({}, records)
      this.param = param
      console.log(12333333333333333)
      console.log(records)
      if(records.length > 0){
        this.chose = records.split(',')
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      // this.chose = []
      this.equipList = []
    },
    handleOk() {
      if (this.addTable) {
        this.$emit('btnSure', this.chose, this.chose.join(','));
        this.close()
      } else {
        let query = {
          id:this.row.id,
        }
        editDeviceSpooling(query).then((res) => {
          if(res.success){
            this.$message.success('修改成功');
          }
          this.close()
          // this.$parent.searchQuery()
        })
      }
    },
    handleCancel() {
      this.close()
    },
    toggleChose(){

    }
  }
}
</script>

<style scoped lang="less">
.box {
  border: 1px solid #dee0e3;
  border-radius: 2px;
  overflow: auto;
  box-sizing: border-box;
  margin-top: 15px;
}

.content {
  width: 100%;
  padding: 5px 15px;

  .grid {
    display: grid;
    grid-template-columns: repeat(37, 25px);
    grid-column-gap: 8px;
    grid-row-gap: 15px;
  }

  .split {
    grid-column: span 2;
  }

  .wall {
    position: relative;

    &:after {
      display: block;
      content: '';
      position: absolute;
      left: 41px;
      top: -21px;
      width: 5px;
      height: 499px;
      background: rgba(53, 65, 86, 0.5);
      border: 1px solid #354156;
    }
  }

  .el-checkbox-button {
    width: 25px;
    height: 80px;
    border-radius: 2px;

    .el-checkbox-button__inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border: none;
      background: #f1f5f8;
      color: #4a576c;
      font-size: 16px;
      padding: 0;
      box-shadow: none;
    }

    &.is-checked {
      .el-checkbox-button__inner {
        background: #e1f0ff;
        color: #2c67f6;
      }
    }

    &.is-disabled {
      .el-checkbox-button__inner {
        background: #e3e3e3;
        color: rgba(74, 87, 108, 0.3);
      }
    }
  }
}

.mb10 {
  margin-bottom: 10px;
}

.equipment-scope {
  padding: 10px 0;
  flex: 1; /* 表示每个子元素都会占据等分的空间 */
  flex-basis: 50px; /* 每个子元素的基础宽度 */
  border-bottom: 1px solid #dee0e3;
  &:last-child {
    border-bottom: none;
  }
}

.title-cj {
  color: #333;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}
</style>
